<!--
* @Author: zhangjing
* @Date: 2025-04-24 11:24:19
* @Description: 选择分组发题=>
-->
<template>
	<pannel @reback="reback" style="height: 400px;">
		<div class="list flex-1">
			<div style="height: 100%; overflow: auto;">
				<a-collapse expand-icon-position="right">
					<a-collapse-panel v-for="(group, gindex) in groupList" :key="gindex" :style="customStyle">
						<div class="group-item-title" slot="header">
							<a-checkbox
								:checked="group.isCheckAll"
								@click.stop=""
								@change.stop="(e) => onChangeAll(e, gindex)"
							>
								<span>{{ group.groupName }}</span>
							</a-checkbox>
						</div>
						<a-row>
							<a-col :span="3" v-for="(item, index) in group.list" :key="index" class="group-item-name">
								<span>
									{{ item.studName }}
								</span>
							</a-col>
						</a-row>
					</a-collapse-panel>
				</a-collapse>
			</div>
		</div>
		
	</pannel>
</template>

<script>
import pannel from './pannel';
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			opType: 'random',
			groupList: [],
			customStyle: 'background: #f3f8ff;border-radius: 4px;margin-bottom: 10px;border:0;overflow: hidden',
		};
	},
	computed: {
		...mapState({
			studentList: (state) => state.websockStore.studentList,
		}),
	},
	props: {
		//接收器信息
		machineData: {
			type: Object,
			default: () => {},
		},
		//表单数据
		formData: {
			type: Object,
			default: () => {},
		},
	},
	components: { pannel },
	created() {
		this.getGroupList();
	},
	methods: {
		onChangeAll(e, gindex) {
			this.groupList[gindex].isCheckAll = e.target.checked;
			this.groupList[gindex].checklist = e.target.checked
				? this.groupList[gindex].list.map((item, index) => item.studId)
				: [];
		},
		getGroupList() {
			this.$postAction(this.$sysManageapi.answerUrl.getGroupList, {
				classId: this.formData.classId,
				subjectCode: this.formData.subjectCode,
			}).then((da) => {
				let list = [];
				if (da.data && da.data.groups && da.data.groups.length > 0) {
					da.data.groups.forEach((item, index) => {
						let studIds = item.studIds;
						studIds.forEach((studId) => {
							let studInfo = this.studentList.find((sitem) => sitem.studId == studId);
							console.log('studInfo', studInfo, studId);
							if (studInfo) {
								if (!list[index]) {
									list[index] = {
										isCheckAll: false,
										list: [studInfo],
										checklist: [],
										groupName: item.groupName,
									};
								} else {
									list[index].list.push(studInfo);
								}
							}
						});
					});
					console.log('list', list);
				}
				this.groupList = list;
			});
		},
		getStuList() {
			let list = [];
			this.groupList
				.filter((item) => item.isCheckAll)
				.forEach((item) => {
					let curr = item.list.map((item) => item.studId);
					list = [...list, ...curr];
				});

			console.log('newArr', list);
			return list;
		},
		reback(){
			this.$emit('reback')
		}
	},
};
</script>

<style scoped lang="less">
.list {
	padding: 20px;
	/deep/ .ant-collapse {
		background: none;
		border: none;
	}
	/deep/ .ant-collapse-header {
		color: @primary-color;
		border: 1px solid @primary-color;
		border-radius: 4px;
	}
	/deep/ .ant-collapse-content-box {
		border: 1px solid @primary-color;
		border-top: none;
		border-radius: 0 0 4px 4px;
	}
	.group-item-title {
		color: @primary-color;
		padding: 0 16px;
		font-size: 24px;
		span {
			font-size: 24px;
			color: @primary-color;
		}
	}
	.group-item-name {
		padding: 6px 16px;
	}
	.group-item-name span {
		font-size: 20px;
	}
}
.group-item {
	margin: 10px 20px;
	border: 1px solid @primary-color;
	border-radius: 10px;
	overflow: hidden;
	line-height: 50px;
	color: #666;
	font-size: 20px;
}
</style>
